<script setup lang="ts">
import leftMenu from '@renderer/layouts/collection/leftMenu.vue'
import Navbar from '@renderer/layouts/collection/navbar.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useMenuStore from './useMenuStore'
const route = useRouter()
const pageQuery = route.currentRoute.value.query as { [key: string]: string }
let currentPageName = route.currentRoute.value.name as WindowNameType
const menuName = ref('')
const menuChange = (event) => {
  menuName.value = event
}
const menuStore = useMenuStore()
</script>

<template>
  <main class="h-screen nodrag w-screen flex flex-col" style="overflow-x: hidden">
    <div class="fixed z-[99] top-0 w-[100%] drag">
      <Navbar :windowName="currentPageName" :title="pageQuery.title" />
    </div>
    <section class="flex flex-1 pt-10 overflow-hidden">
      <div class="fixed z-[99] h-[100%] left-0 drag">
        <leftMenu @menuChange="menuChange" />
      </div>
      <div class="flex-1" :class="menuStore.menuState ? 'ml-[150px]' : 'ml-[64px]'">
        <router-view #default="{ Component, route }" :menuName="menuName">
          <component :is="Component" :key="route.fullPath" />
        </router-view>
      </div>
    </section>
  </main>
</template>
